<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>实时数据大屏</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.0.1/socket.io.js"></script>
  <style>
    body {
      margin: 0;
      padding: 20px;
      background-color: #1a1a1a;
      color: #fff;
      font-family: Arial, sans-serif;
    }

    .controls {
      text-align: center;
      margin-bottom: 30px;
    }

    .btn {
      background-color: #4CAF50;
      border: none;
      color: white;
      padding: 10px 20px;
      margin: 0 10px;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
    }

    .btn:hover {
      background-color: #45a049;
    }

    .btn.active {
      background-color: #2E7D32;
    }

    .dashboard {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
      gap: 20px;
      max-width: 1200px;
      margin: 0 auto;
    }

    .card {
      background-color: #2a2a2a;
      border-radius: 10px;
      padding: 20px;
      text-align: center;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .card h2 {
      margin: 0 0 10px 0;
      color: #4CAF50;
    }

    .value {
      font-size: 2.5em;
      font-weight: bold;
      margin: 10px 0;
    }

    .timestamp {
      text-align: right;
      color: #888;
      margin-top: 20px;
    }

    @keyframes pulse {
      0% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.05);
      }

      100% {
        transform: scale(1);
      }
    }

    .update {
      animation: pulse 0.5s ease-in-out;
    }
  </style>
</head>

<body>
  <h1 style="text-align: center; margin-bottom: 40px;">实时数据监控</h1>

  <div class="controls">
    <button class="btn" onclick="toggleRoom('sales')" id="salesBtn">销售数据</button>
    <button class="btn" onclick="toggleRoom('visitors')" id="visitorsBtn">访问数据</button>
  </div>

  <div class="dashboard">
    <!-- 销售数据卡片 -->
    <div class="card" id="salesCard" style="display: none;">
      <h2>销售额</h2>
      <div id="sales" class="value">0</div>
      <div>实时销售金额 (元)</div>
    </div>
    <div class="card" id="ordersCard" style="display: none;">
      <h2>订单数</h2>
      <div id="orders" class="value">0</div>
      <div>实时订单统计</div>
    </div>

    <!-- 访问数据卡片 -->
    <div class="card" id="visitorsCard" style="display: none;">
      <h2>访问量</h2>
      <div id="visitors" class="value">0</div>
      <div>当前访问人数</div>
    </div>
    <div class="card" id="activeUsersCard" style="display: none;">
      <h2>活跃用户</h2>
      <div id="active_users" class="value">0</div>
      <div>实时活跃用户数</div>
    </div>
  </div>

  <div class="timestamp" id="timestamp">最后更新时间: --:--:--</div>

  <script>
    const socket = io();
    let currentRooms = new Set();

    // 更新数据的函数
    function updateValue(elementId, value) {
      const element = document.getElementById(elementId);
      if (element) {
        element.textContent = value;
        element.classList.remove('update');
        void element.offsetWidth; // 触发重绘
        element.classList.add('update');
      }
    }

    // 切换房间
    function toggleRoom(room) {
      const btn = document.getElementById(room + 'Btn');
      if (currentRooms.has(room)) {
        // 离开房间
        socket.emit('leave', { room: room });
        currentRooms.delete(room);
        btn.classList.remove('active');
        // 隐藏相关卡片
        if (room === 'sales') {
          document.getElementById('salesCard').style.display = 'none';
          document.getElementById('ordersCard').style.display = 'none';
        } else {
          document.getElementById('visitorsCard').style.display = 'none';
          document.getElementById('activeUsersCard').style.display = 'none';
        }
      } else {
        // 加入房间
        socket.emit('join', { room: room });
        currentRooms.add(room);
        btn.classList.add('active');
        // 显示相关卡片
        if (room === 'sales') {
          document.getElementById('salesCard').style.display = 'block';
          document.getElementById('ordersCard').style.display = 'block';
        } else {
          document.getElementById('visitorsCard').style.display = 'block';
          document.getElementById('activeUsersCard').style.display = 'block';
        }
      }
    }

    // 监听数据更新事件
    socket.on('update_data', function (data) {
      // 更新所有收到的数据
      Object.keys(data).forEach(key => {
        if (key !== 'timestamp') {
          updateValue(key, data[key]);
        }
      });
      document.getElementById('timestamp').textContent = '最后更新时间: ' + data.timestamp;
    });

    // 连接时自动加入销售数据房间
    socket.on('connect', function () {
      toggleRoom('sales');
    });
  </script>
</body>

</html>